<template>
    <div class="main">
        <div class="container" :class="['login-box', { 'right-panel-active': form.isSign }]">
            <div class="form-container sign-up-container">
                <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon label-width="60px"
                    label-position="left">
                    <h1>注册</h1>
                    <el-form-item label="用户名:" prop="username">
                        <el-input v-model="form.username" maxlength="10" placeholder="1-10位只支持中日韩英数字等" required />
                    </el-form-item>
                    <el-form-item label="密码:" prop="password">
                        <el-input v-model="form.password" type="password" maxlength="18" placeholder="6-18位含大小写字母"
                            show-password required />
                    </el-form-item>
                    <el-form-item label="邮箱:" prop="email">
                        <el-input v-model="form.email" placeholder="qq.com,163.com等..." required />
                    </el-form-item>
                    <el-form-item label="验证码:" prop="code" width="50">
                        <el-col :span="16">
                            <el-input v-model="form.code" placeholder="邮箱验证码" required />
                        </el-col>
                        <el-col :span="8">
                            <el-button :disabled="!isValidEmail || form.countdown > 0" @click="sendEmail" class="sendCode">
                                {{ form.countdown > 0 ? `${form.countdown}s` : '发送验证码' }}
                            </el-button>
                        </el-col>
                    </el-form-item>
                    <el-checkbox v-model="form.checked" size="large"><a
                            @click="this.$router.push({ name: 'readme' })">网站协议</a></el-checkbox>
                    <el-button @click="Register(ruleFormRef)" class="regBtn" round>注 册</el-button>
                </el-form>
            </div>
            <div class="form-container sign-in-container">
                <el-form @keyup.enter="submit" label-width="60px" label-position="left">
                    <h1>登录</h1>
                    <el-form-item label="账号:">
                        <el-input v-model="form.username" placeholder="用户名或邮箱" required></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input v-model="form.password" type="password" placeholder="密码" show-password required />
                    </el-form-item>
                    <div style="display: flex; justify-content: space-between;line-height: 40px;">
                        <el-checkbox v-model="form.autoLogin" size="large">自动登录</el-checkbox>
                        <a @click="form.forget = true">忘记密码?</a>
                    </div>
                    <Vcode :show="form.isShow" @success="onSuccess" @close="onClose" @fail="fail" :imgs="form.imgs" />
                    <el-button type="primary" @click="submit" class="loginBtn" round>登录</el-button>
                </el-form>
            </div>

            <div class="overlay-container">
                <div class="overlay">
                    <div class="overlay-panel overlay-left">
                        <h2>欢迎您的回归!!!</h2>
                        <el-button @click="signIn" class="ghost" round>登录</el-button>
                    </div>
                    <div class="overlay-panel overlay-right">
                        <h2>快来体验新世界吧!!!</h2>
                        <el-button @click="signUp" class="ghost" round>注册</el-button>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog v-model="form.forget" title="修改密码" width="30%" draggable>
            <el-form :model="form" ref="ruleFormRef" :rules="rules" status-icon label-width="60px" label-position="left">
                <el-form-item label="新密码:" prop="password">
                    <el-input v-model="form.newPwd" placeholder="6-18位含大小写字母" show-password required />
                </el-form-item>
                <el-form-item label="邮箱:" prop="email">
                    <el-input v-model="form.email" placeholder="qq.com,163.com等" required />
                </el-form-item>
                <el-form-item label="验证码:" prop="code" width="50">
                    <el-col :span="16">
                        <el-input v-model="form.code" placeholder="邮箱验证码" required />
                    </el-col>
                    <el-col :span="8">
                        <el-button :disabled="!isValidEmail || form.countdown > 0" @click="sendEmail" class="sendCode">
                            {{ form.countdown > 0 ? `${form.countdown}s` : '发送验证码' }}
                        </el-button>
                    </el-col>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="info" @click="resetForm(ruleFormRef)">取消</el-button>
                    <el-button type="primary" @click="forget(ruleFormRef)">
                        确定
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import Vcode from 'vue3-puzzle-vcode';
// 登录注册接口
import { login, register, email } from '@/api/login/index';
import { routes } from '@/api/useroutes'
import router from '@/router/index'
// 正则
import { nameRule, passRule, emailRule, codeRule } from '@/utils/validate'
import Imgs1 from '../../assets/img/slide1.jpg'
import Imgs2 from '../../assets/img/slide2.jpg'
import Imgs3 from '../../assets/img/slide3.jpg'
import Imgs4 from '../../assets/img/slide4.jpg'
import Imgs5 from '../../assets/img/slide5.jpg'
import Imgs6 from '../../assets/img/slide6.jpg'
import Imgs7 from '../../assets/img/slide7.jpg'
import Imgs8 from '../../assets/img/slide8.jpg'
import { ElMessage } from 'element-plus';

const imgs = [Imgs1, Imgs2, Imgs3, Imgs4, Imgs5, Imgs6, Imgs7, Imgs8];

const ruleFormRef = ref();

const form = reactive({
    username: '', // 用户名
    password: '', // 密码
    newPwd: '', // 新密码
    email: '', // 邮箱
    code: '', // 验证码
    checked: false, // 是否勾选声明
    forget: false, // 忘记密码
    countdown: 0, // 倒计时
    isSendingEmail: false, // 发送验证码
    isSign: false, // 登录注册切换
    imgs: imgs, // 图形验证图片
    autoLogin: false // 自动登录
})

// 登录注册切换
const signUp = () => {
    form.isSign = true;
}

const signIn = () => {
    form.isSign = false;
}

// 忘记密码
const resetForm = () => {
    if (!ruleFormRef.value) return
    ruleFormRef.value.resetFields()
    form.forget = false;
}

const forget = () => {
    if (!ruleFormRef.value) return
    ruleFormRef.value.validate(async (valid) => {
        if (valid) {
            const data = {
                Pwd: form.newPwd,
                email: form.email,
                code: form.code
            };

            form.forget = false;
        } else {
            ElMessage.error('请正确填写!');
        }
    })
}

// 登录
const submit = () => {
    if (!form.username || !form.password) {
        ElMessage.error('用户名或密码不能为空');
    } else {
        form.isShow = true;
    }
};

// 图形验证成功则执行异步请求
const onSuccess = async () => {
    const data = {
        username: form.username,
        password: form.password
    }

    await login(data)
        .then(async () => {
            form.isShow = false;
            router.push('/')
            await routes();
        })
        .catch((error) => {
            ElMessage.error('无法登录，请稍后重试!');
        })
};

// 关闭图形验证码
const onClose = () => {
    form.isShow = false;
};

const fail = () => {
    ElMessage.error('验证失败');
}

const rules = ref({
    username: [{ validator: nameRule, trigger: 'blur' }],
    password: [{ validator: passRule, trigger: 'blur' }],
    email: [{ validator: emailRule, trigger: 'blur' }],
    code: [{ validator: codeRule, trigger: 'blur' }]
})

// 注册接口
const Register = async () => {
    if (form.checked) {
        if (!ruleFormRef.value) {
            return
        }

        ruleFormRef.value.validate(async (valid) => {
            if (valid) {
                const data = {
                    username: form.username,
                    password: form.password,
                    email: form.email,
                    code: form.code
                };

                await register(data);

                form.isSign = false;
            } else {
                ElMessage.error('请正确填写!');
            }
        })
    } else {
        ElMessage.warning('请先同意网站协议');
    }
}

const isValidEmail = computed(() => {
    const validSuffixes = [
        '@qq.com',
        '@gmail.com',
        '@yahoo.com',
        '@msn.com',
        '@hotmail.com',
        '@aol.com',
        '@ask.com',
        '@live.com',
        '@qq.com',
        '@0355.net',
        '@163.com',
        '@163.net',
        '@263.net',
        '@3721.net',
        '@yeah.net',
        '@aliyun.com'
    ];
    const suffix = form.email.substring(form.email.lastIndexOf('@'));
    return validSuffixes.includes(suffix);
});

// 邮箱接口
const sendEmail = async () => {
    if (form.isSendingEmail || !isValidEmail) {
        return;
    }
    const data = {
        email: form.email,
    };

    await email(data)

    // 设置倒计时
    form.countdown = 60;
    form.isSendingEmail = true;
    const timer = setInterval(() => {
        if (form.countdown > 0) {
            form.countdown--;
        } else {
            clearInterval(timer);
            form.isSendingEmail = false;
        }
    }, 1000);
}
</script>

<style scoped>
.main {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(120deg, #ddd, #ddeddd);
}

h1 {
    position: relative;
    bottom: 40px;
    font-weight: bold;
    color: #1fafe8;
}

h2 {
    letter-spacing: .5px;
    margin-bottom: 30px;
}

a {
    color: #ccc;
    font-size: 14px;
    text-align: right;
}

.container {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
    position: relative;
    overflow: hidden;
    width: 992px;
    max-width: 100%;
    min-height: 550px;
}

.form-container .el-form {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 0 40px;
    height: 100%;
    justify-content: center;
    text-align: center;
}

.el-button {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    cursor: pointer;
}

.el-button:active {
    transform: scale(.95);
}

.el-button:focus {
    outline: none;
}

.sendCode {
    color: #fff;
    background: linear-gradient(120deg, #1fafe8, #6366f1);
    float: right;
}

.sendCode:active {
    transform: scale(.95);
}

.ghost {
    padding: 20px 40px;
    background: transparent;
    border-color: #fff;
}

.form-container {
    position: absolute;
    top: 0;
    height: 100%;
    transition: all .6s ease-in-out;
}

.form-container .el-button {
    transition: .5s;
    color: #fff;
    background: linear-gradient(120deg, #1fafe8, #6366f1);
    background-size: 200%;
}

.form-container .el-button:hover {
    background-position: right;
}

.sign-in-container {
    left: 0;
    width: 50%;
    z-index: 2;
}

.sign-up-container {
    left: 0;
    width: 50%;
    z-index: 1;
    opacity: 0;
}

.overlay-container {
    position: absolute;
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    transition: transform .6s ease-in-out;
    z-index: 100;
}

.overlay {
    background: linear-gradient(120deg, #1fafe8, #6366f1);
    color: #fff;
    position: relative;
    left: -100%;
    height: 100%;
    width: 200%;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
}

.overlay-panel {
    position: absolute;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 40px;
    height: 100%;
    width: 50%;
    text-align: center;
    transform: translateY(0);
    transition: transform .6s ease-in-out;
}

.overlay-right {
    right: 0;
    transform: translateY(0);
}

.overlay-left {
    transform: translateY(-20%);
}

.container.right-panel-active .sign-in-container {
    transform: translateY(100%);
}

.container.container.right-panel-active .overlay-container {
    transform: translateX(-100%);
}

.container.right-panel-active .sign-up-container {
    transform: translateX(100%);
    opacity: 1;
    z-index: 5;
}

.container.container.right-panel-active .overlay {
    transform: translateX(50%);
}

.container.container.right-panel-active .overlay-left {
    transform: translateY(0);
}

.container.container.right-panel-active .overlay-right {
    transform: translateY(20%);
}
</style>